<template>
  <el-row :gutter="20" class="css-main-view">
    <el-col :span="6">
      <div class="css-add-project showpic">
        <el-button type="text" class="css-edit-project" icon="el-icon-plus" @click="addProject">新增项目</el-button>
      </div>
    </el-col>

    <el-col :span="6" v-for="(item) in 20" :key="item">
      <el-card  class="showpic" :body-style="{ padding: '0px' }" style="margin-bottom: 20px; height: 160px" >
        <div style="padding: 8px;height: 160px;position: relative;cursor:pointer;" @click="projectClick(item)">
          <div :style="{backgroundColor: '#d3f261'}">
            <span>好吃的汉堡</span>
          </div>
          <div class="parent">
            <el-button type="text" class="button" style="border-right: 1px solid #f0f0f0;">删除项目</el-button>
            <el-button type="text" class="button">编辑项目</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <Pdialog :title=title :dialog-visible=vislable @UpdialogVisible="updateVislable" />
  </el-row>
</template>

<script>
import Pdialog from "@/components/project/Project_dialog";
export default {
  name: "Project_list",
  components: {
    Pdialog
  },
  data() {
    return {
      vislable: false,
      title: '新增项目'
    };
  },
  methods: {
    // 修改弹窗
    updateVislable (value) {
      console.log(value, 'value')
      this.vislable = value
    },
    // 添加项目弹窗
    addProject(){
      this.vislable = true
    },
    // 点击项目卡片
    projectClick(item){
      console.log(item)
      // 存菜单
      // TODO 根据接口返回
      const side_menu = [
        {name: "项目概况", url: "Disbod"},
        // {name: "功能测试", url: "Disbod"},
        {name: "接口测试", url: "Interface"},
        // {name: "接口集合", url: "Setting"},
        {name: "项目设置", url: "Setting"},
      ]
      this.$store.commit('initMenu', side_menu)
      // 设置默认选中routerName
      this.$store.commit('setRouterName', "Disbod");
      this.$router.push({name: 'Disbod'})

    }
  }
}
</script>

<style>
.css-main-view {
  background: #ffffff;
  padding: 12px 12px;
  height: calc(100vh - 140px);
  overflow: auto;
}
.parent {
  position: absolute;
  width: 96%;
  bottom: 20px;
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.button {
  float: left;
  width: 200px;
}
.css-add-project {
  margin-bottom: 20px; height: 160px;border: darkgray 1px dashed;text-align: center; line-height: 160px;border-radius: 4px
}
.css-edit-project {
  height: 100%; width: 100%;font-size: 16px;
}
.showpic:hover{
  transform: scale(1.02);
}
</style>
